<template>
	<div class="searchbag" @click="notshow">
		<div class="searchContainer" @click.stop>
			<div class="topSearch">
				<div class="seachBox">
					<input type="text" id="search_input" v-model="housetype" @keyup="housetp" placeholder="搜索房源类型" class="iptHeader">
					<span class="btSelectHeader searchBtn" @click="searchBtn" ><img src="../../assets/home/image/home_search.png"/></span>
					<span class="btCloseSearch" @click="close">{{btn[1]}}</span>
				</div>
				<ul class="next-list">
					<li v-for='(item,index) in items' @click="nextlist($event)">{{item.type_content}}</li>
				</ul>
			</div>
			<div class="resultWrap" style="display: none">
				<ul class="listResult" id="search_list">
				</ul>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'mymask',
		data() {
			return {
				flag: false,
				housetype: "",
				show: false,
				items: "",
				 allarr:[],
				html:""
			}
		},
		props: ['btn'],
		methods: {
			back() {
				this.$router.go(-1);
			},
			close() {
				let obj = {
					cances: 1,
					flag: false,
				};
				this.$emit("getChildrenflag", obj)
			},
			notshow() {
				let obj = {
					cances: 1,
					flag: false,
				};
				this.$emit("getChildrenflag", obj)
			},
			
			
//头部搜索----------------------------------------------------------
			housetp() {
				var _this = this;
				var data = {
					housetype:_this.housetype
				}
				_this.axios.post(this.ajaxUrls + '/api/Details/selhousetype',_this.qs.stringify(data)).then(function(res) {
					_this.items = res.data;
				}).catch(function(err) {
					console.log("查询不到");
				})
			},
		
			nextlist(e){
				this.html=e.toElement.innerHTML
				this.housetype=e.toElement.innerHTML;
				if(this.housetype=e.toElement.innerHTML){
					this.show= false;
				}
				this.$store.commit('add',this.housetype);
				this.$emit('lisentype',false);
//				this.$router.replace('/list')
			},
			searchBtn(){
				this.$router.replace('/list/1')
			}
		},
		
	}
</script>

<style scoped>
	.header,
	.headers {
		width: 7.5rem;
		height: 1rem;
		display: flex;
		justify-content: space-between;
		padding: 0 0.2rem;
		box-sizing: border-box;
		align-items: center;
		position: absolute;
		z-index: 999;
	}
	
	.next-list {
		position: absolute;
		top: 1rem;
		left: 0.2rem;
		margin-left: 0;
		width: 7.1rem;
		height: auto;
		background: white;
		color: #666666;
		font-size: 0.13rem;
		list-style: none;
		padding: 0 0.2rem;
		box-sizing: border-box;
	}
	.next-list>li{
		width: 100%;
		font-size: 0.3rem;
		color: #666666;
		padding: 0.1rem 0.3rem;
		box-sizing: border-box;
		border-bottom: 1px solid #F1F1F1;
	}
	.searchbag {
		z-index: 9999;
		height: 100%;
		position: fixed;
		left: 0px;
		top: 0px;
		margin: 0px auto;
		overflow-y: auto;
		transform-origin: 0px 0px 0px;
		opacity: 1;
		transform: scale(1, 1);
		background: rgba(0, 0, 0, 0.6);
	}
	
	.searchContainer {
		width: 10rem;
		margin-left: auto;
		margin-right: auto;
	}
	
	.topSearch {
		width: 7.5rem;
		height: 1rem;
		border-bottom: 0.025rem solid #e2e2e2;
		background: #f9f9f9;
		position: relative;
	}
	
	.topSearch .seachBox {
		position: absolute;
		top: 0.2rem;
		left: 0.2rem;
		margin-left: 0;
		width: 6.24rem;
	}
	
	.iptHeader {
		border: none;
		background: 0 0;
		width: 6.24rem;
		height: 0.6rem;
		line-height: 0.6rem;
		padding: 0 0 0 0.26rem;
		box-sizing: border-box;
		outline: none;
	}
	
	.btSelectHeader {
		display: block;
		width: 0.6rem;
		height: 0.6rem;
		position: absolute;
		top: 0;
		right: 0.2rem;
		text-align: center;
	}
	
	.btSelectHeader img {
		width: 0.3rem;
		height: 0.3rem;
		margin-top: 0.18rem;
	}
	
	.btCloseSearch {
		width: 0.8rem;
		height: 1rem;
		position: absolute;
		right: -0.7rem;
		line-height: 0.9rem;
		font-size: 0.15rem;
		top: -0.1rem;
		text-align: center;
		color: #666666;
		text-indent: 0.2rem;
	}
	
	.btSelectHeader::before {
		display: block;
		content: "";
		width: 0.02rem;
		height: 0.5rem;
		background: #ccc;
		position: absolute;
		top: 0.1rem;
		left: -0.1rem;
	}
	
	.header>img {
		height: 0.6rem;
	}
	
	.headers>img {
		width: 0.6rem;
	}
	
	.headers>p {
		font-size: 0.5rem;
		color: white;
	}
	
	.selectCity {
		display: block;
		background: #fff;
		border-radius: 0.33333333rem;
		padding: 0 0.22rem;
		line-height: 0.48rem;
		text-align: center;
		position: absolute;
		left: 1.3rem;
		box-sizing: border-box;
		font-size: 0.12rem;
	}
	
	.topTelphone {
		width: 3rem;
		color: #dcdcdc;
		position: absolute;
		left: 3.3rem;
		font-family: Georgia;
		font-size: 0.23rem;
		text-decoration: none;
	}
	
	.selectCity_next {
		width: 0.14rem;
		height: 0.1rem;
		font-size: 0.1rem;
	}
	
	.topTelphone i.Telphone {
		width: 0.3rem;
		height: 0.3rem;
		margin-top: 0.3rem;
	}
	
	.topTelphone img {
		width: 0.3rem;
		height: 0.3rem;
	}
	
	.home_user {
		width: 0.4rem;
		height: 0.4rem;
		overflow: hidden;
	}
	
	.home_user img {
		width: 100%;
		height: 100%;
	}
	
	#search_input {
		height: 0.7rem;
		border: 1px solid gainsboro;
		box-sizing: border-box;
		font-size: 0.3rem;
	}
</style>